<template>
	<view>
		<view class="container">

			<view class="box_title zl-flex " style="margin-top: 0;">
				<view class="sort">
					<text class="zl_font_number zl-font-24 zl-color-white">1</text>
				</view>
				<text class="zl-m-l-16 zl-font-36 zl-font-bold zl-color-black">选择声音</text>
			</view>


			<view class="form_box">
				<view class="form_item zl-flex zl-row-between">
					<view class="form_item_left">
						<text class="zl-font-28 zl-font-bold  zl-one-yichu">数字分身声音</text>
					</view>
					<view @click="to_viocelist()" class="form_item_right zl-flex zl-row-right">

						<text v-if="form.voiceModelId>0" class="zl-font-28 zl-font-500 zl-color-EB5E00 zl-one-yichu">
							已完成设置 </text>
						<text class="zl-font-28 zl-font-500 zl-color-EB5E00" v-else> 去设置 </text>
						<image class="right_icon zl-m-l-10" src="/static/icon/to_right_orange.png"></image>
					</view>
				</view>
			</view>
			<view class="box_title zl-flex zl-m-t-70 zl-row-between" style="margin-top: 0;">
				<view class="zl-flex">
					<view class="sort">
						<text class="zl_font_number zl-font-24 zl-color-white">2</text>
					</view>
					<text class="zl-m-l-16 zl-font-36 zl-font-bold zl-color-black">视频口播文案</text>
				</view>
				<view @click="openAI()" class="AI-btn zl-flex zl-row-center">
					<image style="width: 28rpx;margin-right: 12rpx;" src="/static/clone/AI.png" mode="widthFix"></image>
					AI帮写
				</view>
			</view>
			<view class="form_box">
				<textarea style="width: 100%;height: 400rpx;padding: 30rpx 0;" v-model="form.content"
					placeholder="请输入文字" :border="false" :clearable="false" placeholderStyle="color:#999;fontSize:28rpx"
					:cursor-spacing="80" :maxlength="200" />
			</view>

		</view>
		<view class="footer zl-flex zl-row-center">
			<view class="btn" @click="create()"> 生成语音 </view>
		</view>
		<uni-popup :animation="false" ref="popup" type="center" background-color="#fff"
			border-radius="20rpx 20rpx 20rpx 20rpx" :is-mask-click="false">
			<view class="tip-box zl-flex-col zl-col-center">
				<view class="zl-color-000 zl-font-40 zl-font-600 zl-m-t-50"> 生成需扣除<text
						style="color: #EB5E00;">一次</text> 配额，请知晓！</view>
				<!-- <view class="zl-color-666 zl-font-24 zl-m-t-30">生成该数字人视频，系统检测到123个口播文字，视频市场约1分30秒左右，扣除20点，请知晓！ </view> -->
				<view class="btn zl-m-t-32 sure-btn" @click="sure()"> 确认生成 </view>
				<view class="btn zl-m-t-32 cancelbtn" @click="cancel()"> 再想想 </view>
			</view>
		</uni-popup>
		<uni-popup :animation="false" ref="popup2" type="center" background-color="#fff"
			border-radius="20rpx 20rpx 20rpx 20rpx" :is-mask-click="false">
			<view class="tip-box zl-flex-col zl-col-center">
				<view class="zl-color-000 zl-font-40 zl-font-600 zl-m-t-50"> 正在生成视频中… </view>
				<view class="zl-color-666 zl-font-24 zl-m-t-30">
					大约需耗时<text style="color: #EB5E00;">3分钟</text>完成视频合成，您可稍后在【我的作品】模块中，查看进度。
				</view>

				<view class="btn zl-m-t-32 cancelbtn" @click="to_mywork()"> 前往查看 </view>
			</view>
		</uni-popup>
		<uni-popup :animation="false" ref="popup3" type="bottom" background-color="#fff" border-radius="20rpx 20rpx 0 0"
			:is-mask-click="false">
			<view class="AI-box">
				<view class="AI-top zl-flex zl-row-between">
					<view class="">
						AI帮写
					</view>
					<image @click="closeAI()" style="width: 30rpx;height: 30rpx;" src="/static/icon/pop_close.png"
						mode=""></image>
				</view>
			</view>
			<view class="">
				页面待定
			</view>
		</uni-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				current: 0,
				form: {
					content: '',
					voiceModelId: 0
				}
			};
		},
		onLoad() {
			
			uni.$on('choosevoiceModelId', res => {
				if (res) {
					console.log(res);
					this.form.voiceModelId = res;
				}
			})
		},
		onUnload() {
			uni.$off('choosevoiceModelId')
		},
		methods: {
			choosePeople(item, index) {
				this.current = index
			},

			create() {
				if (!this.form.content) {
					return this.$util.msg('请填写文本内容!')
				}
				if (this.form.voiceModelId <= 0) {
					return this.$util.msg('请选择声音!')
				}
				this.$refs.popup.open()
			},
			cancel() {

				this.$refs.popup.close()
			},
			sure() {


				this.api.clip.submitvoicetask(this.form).then(res => {
					console.log(res);
					if (res.code === 0) {
						this.$refs.popup.close();
						this.$refs.popup2.open()
					} else {
						this.$refs.popup.close();
						this.$util.msg(res.msg);
					}


				}).catch(err => {
					this.$refs.popup.close();
					this.$util.msg('请检查网络连接！');
				})
			},
			to_mywork() {
				this.$refs.popup2.close();
				uni.switchTab({
					url: '/pages/work/work'
				})
			},
			openAI() {
				this.$refs.popup3.open()
			},
			closeAI() {
				this.$refs.popup3.close()
			},
			to_viocelist() {
				uni.navigateTo({
					url: '/pages/create/voiceList'
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		padding: 50rpx 30rpx 0;
		height: calc(100vh - 190rpx);
		overflow-y: scroll;
		padding-bottom: 20rpx;
	}

	.box_title {
		width: 690rpx;
		margin: 50rpx auto 0;

		.sort {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 36rpx;
			height: 36rpx;
			text-align: center;
			background-color: #000000;
			border-radius: 5rpx;

			text {
				margin-top: 6rpx;
			}
		}

		image {
			width: 36rpx;
			height: 36rpx;
		}
	}

	.form_box {
		width: 690rpx;
		margin: 30rpx auto 0;
		padding-left: 30rpx;
		background-color: white;
		border-radius: 20rpx;

		.form_item {
			width: 660rpx;
			height: 100rpx;
			padding-right: 30rpx;
			position: relative;

			.form_item_left {
				text {
					width: 100%;
				}
			}

			.form_item_right {
				font-size: 28rpx;
				width: 100%;

				.right_icon {
					width: 10rpx;
					height: 20rpx;
				}
			}

			.form_item_right ::v-deep {
				input {
					color: rgba(21, 21, 21, 1) !important;
					font-weight: 500;
				}

				uni-number-box {
					input {
						color: #e4265b !important;
						font-weight: 500;
					}
				}
			}
		}

		.form_item_line::after {
			content: "";
			width: 100%;
			height: 1px;
			background-color: #f4f4f4;
			position: absolute;
			top: 99.9%;
		}
	}

	.footer {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 190rpx;
		background: #FFFFFF;

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 690rpx;
			height: 110rpx;
			background: linear-gradient(90deg, #5493DF 0%, #144FC3 100%);
			box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(66, 106, 171, 0.29);
			border-radius: 20rpx;
			font-size: 36rpx;
			color: #F9F9F9;
		}
	}

	.text-box::-webkit-scrollbar {
		height: 0;
	}

	.tip-box {
		width: 600rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
		padding: 70rpx 60rpx 58rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -60%);

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 400rpx;
			height: 88rpx;
			border-radius: 44rpx;
		}

		.cancelbtn {
			background: #EEEEEE;
			font-weight: 600;
			font-size: 28rpx;
			color: #000;
		}

		.sure-btn {
			background: linear-gradient(90deg, #5493DF 0%, #144FC3 100%);
			box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(66, 106, 171, 0.29);
			color: #fff;
		}
	}

	.AI-btn {
		width: 170rpx;
		height: 63rpx;
		background: #EB5E00;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.AI-box {
		background: #EDF0F4;
		border-radius: 20rpx 20rpx 0 0;

		.AI-top {
			height: 120rpx;
			padding: 0 30rpx;
			border-bottom: 1px solid #ddd;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #131415;
		}
	}
</style>